<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,minimum-scale=0.5" />
		<title>潜行者M 关注前端开发热爱简约设计。</title>
		<link rel="stylesheet" type="text/css" media="screen" href="http://www.qianxingzhem.com/wp-content/themes/qetro/style.css" />
	<link rel="stylesheet" href="http://www.qianxingzhem.com/wp-content/themes/qetro/mobile.css" type="text/css" media="handheld and (max-width: 740px), screen and (max-width: 740px)">
	<link rel="pingback" href="http://www.qianxingzhem.com/xmlrpc.php" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<link rel="alternate" type="application/rss+xml" title="RSS 潜行者M" href="http://www.qianxingzhem.com/feed" />
	<link rel="alternate" type="application/rss+xml" title="RSS 潜行者M Comments" href="http://www.qianxingzhem.com/comments/feed" />
	<link rel="shortcut icon" href="http://www.qianxingzhem.com/wp-content/themes/qetro/favicon.ico" />

	<!--[if lt IE 9]>
	<script src="http://www.qianxingzhem.com/wp-content/themes/qetro/js/html5.js"></script>
	<![endif]-->

	<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.qianxingzhem.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.qianxingzhem.com/wp-includes/wlwmanifest.xml" /> 
</head>
<body>
	<!-- header Start -->
	<header class="header fl">
		<div class="header-wrap c">
			<div  class="blog-header fl ofh">
				<div class="blog-title"><h1><a href="http://www.qianxingzhem.com">潜行者M</a></h1></div>
				<div class="blog-des"><h2>关注前端开发热爱简约设计。</h2></div>
			</div>
			<nav class="nav fl">
				<div class="menu-topnav-container"><ul id="menu-topnav" class="menu"><li id="menu-item-1964" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1964"><a href="http://www.qianxingzhem.com/post-category/qianduan">前端相关</a></li>
<li id="menu-item-1966" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1966"><a href="http://www.yujiangshui.com">关于我</a></li>
</ul></div>			</nav>
		</div>
	</header>
	<!-- header End -->	<!-- body Start -->
	<div class="main-wrap clearfix c ">
		<div class="main fl ">
					<article id="entry-2003" class="entry ofh fl " class="post-2003 post type-post status-publish format-standard hentry category-others">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-2003.html">本博将停止更新</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>转眼之间，自 2011年6月 开博之后，到现在已经整两年多一点。虽然只是短短两年，但是变化太大了。
博客发展过程
高考完之后，我终于轻松了，可以做自己喜欢的事情，注册了几个域名买空间，开始做网站。于是当然需要有这样一个独立博客。
刚开始的时候，写一些乱七八糟的文章，包括自己的上网经验，计算机使用技巧等等等等。而且质量、排版都很糟糕。
其中还有一段时间（大约在 2011年末 大...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-2003.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-2001" class="entry ofh fl " class="post-2001 post type-post status-publish format-standard hentry category-qianduan">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-2001.html">IE10 的一些前端有关的特性</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>IE10 已经出来了很久一段时间了，整理一下有关的特性，方便日后查阅使用。
IE10 的 hack
.ie{
color:red;          /* for all browsers*/
_color:green;       /* hack for IE6*/
*color:black;       /* hack for IE6 IE7*/
color:white\9;      /* hack for IE6+(IE6 IE7 IE8 IE9 IE10)*/
color:yellow\0;     /* hack for IE8+(IE8 IE9 IE10)*/
...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-2001.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1995" class="entry ofh fl " class="post-1995 post type-post status-publish format-standard hentry category-qianduan tag-emmet tag-sublime-text-2">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1995.html">Emmet 常用的高级功能</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>Emmet 的功能不仅仅局限在快速生成标记语言结构或者生成 CSS 代码，它还具有很多常用的前端相关的功能，下面就来介绍几个比较常用的功能。
生成 Lorem Ipsum
Lorem Ipsum 表示一段随机看不懂的文字。Lorem Ipsum 的文字让人看不懂，这样才能忽略内容的含义而专注内容的排版，作为测试数据填充用的。使用 Emmet 生成 Lorem Ipsum 文本非常简单，只需要使用 lorem 这一条命令...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1995.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1993" class="entry ofh fl " class="post-1993 post type-post status-publish format-standard hentry category-css category-qianduan tag-bug">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1993.html">Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>text-overflow:ellipsis 属性通常用于隐藏超出长度的文本，并在文本最后面增加省略号。
456bereastreet 发现：如果在网页的交互等过程中，出现一个新层（例如鼠标移动到下拉菜单，弹出下拉菜单内容），在 Firefox 下，文本内容当然会被新弹出内容遮住，但是省略号并不会。它会出现在新层的上面。
可以使用 Firefox 打开 Demo 看一下具体效果。
如果你也遇到了这个问题，解决方法很简单...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1993.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1989" class="entry ofh fl " class="post-1989 post type-post status-publish format-standard hentry category-html">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1989.html">Unicode 符号序号以及 HTML 实体字符表格</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>Unicode 是全世界通用的最大的字符集合，包含了各国各种各样的字符。由于字符数量巨大而且各种各样，所以输入法一般无法打出很多很特殊的 Unicode 符号。搜狗输入法可以打出一些基础的符。
在网页中，有时候我们会需要一些符号，例如：倒三角 ▼。如果要让网页显示这种符号，显然用字符的方式比较好，体积小到可以忽略不计同时还可以方便用 CSS 定义样式等。但是直接把这个倒三角复制...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1989.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1985" class="entry ofh fl " class="post-1985 post type-post status-publish format-standard hentry category-css category-qianduan tag-css3">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1985.html">Transform 属性会导致子元素的 fixed 属性失效</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>在项目中，需要为顶部导航条增加滚动跟随效果。很显然，只需要为 #header 加上 position:fixed; 属性即可，但是加上之后却无效。只能用监测浏览器滚动距离然后实时的赋值到 top 属性来模拟跟随。
但是这种方法由于浏览器之间滚动的距离不同等缘故，会导致闪烁等问题，只在 Firefox 效果完美。同时会影响性能，在中低端安卓设备中效果很差。这种影响用户体验的事情，是肯定要避免的。还是...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1985.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1980" class="entry ofh fl " class="post-1980 post type-post status-publish format-standard hentry category-javascript-2 category-qianduan tag-jquery">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1980.html">实现网页换肤功能的最优解（带 Cookie 记录功能）</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>网页换肤是一门老技术了，老的现在都不怎么流行了。但是，有时候有些客户就是想要这个换肤功能。于是就实践做了一下网页换肤，结果遇到了很多问题。
网页换肤的基本原理
基本原理很简单，就是使用 JS 切换对应的 CSS 样式表。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1980.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1921" class="entry ofh fl " class="post-1921 post type-post status-publish format-standard hentry category-qianduan tag-phpdev tag-50">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1921.html">让浏览者禁用响应式布局界面</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>
原文：Letting users disable responsive layout
作者：456 Berea Street  翻译者：潜行者m
版权声明：版权归原作者所有，翻译仅作学习交流目的！

响应式网站设计（Responsive Web Design）使用强大的媒体查询（media querie）让网站可以根据浏览者的浏览设备分辨率进行样式调整。但是，这样也产生了一个问题：有些人并不希望网站的外观在不同的浏览设备中发生改变。因为改变了之...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1921.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1970" class="entry ofh fl " class="post-1970 post type-post status-publish format-standard hentry category-others tag-rizhi">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1970.html">主题 Qetro 2.0 版本已经完成了近 50% 的工作</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>自 2013年5月19日晚开始着手升级到现在，已经11天了。中间的一个周末受 apemanchen 的邀请，去了北京一趟，谈了一下顺便小玩了一下。同时，蹭了 MK 一顿饭，真是好爽啊，出门在外有个朋友就是好。剩下的大部分时间，就用来升级这个主题。
距离上次 1.4 版本发布时间 2月8日，已经过去了三个多月了，这么长时间没有改动、升级主题，一个是比较忙没有太多时间，另一个是在不断深入 WordP...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1970.html" >阅读更多 &gt;&gt;</a>
			</article>
					<article id="entry-1962" class="entry ofh fl " class="post-1962 post type-post status-publish format-standard hentry category-zuopin tag-sheji">
				<header class="entry-title">
					<h1 class="fb"><a href="http://www.qianxingzhem.com/post-1962.html">近期整站作品：泰山石数据管理系统</a></h1>
					<div class="entry-header-bg"></div>
				</header>
				<div class="entry-excerpt" >
										<p>近期很久没有做整站的建设了，同学申请了一个关于泰山石的科技立项，需要搭建一个泰山石数据管理系统。我当然想到的就是使用 WordPress 系统设计搭建一个了。于是就设计了一个，然后给他们做成主题整合到了 WordPress 上面。
设计风格很显然是简约的，简单的色调，然后搭配上响应式布局，使用 CSS3 做一些简单的渐变动画。由于域名等使用的是临时域名，网站被审核完就会关闭，所以...</p>
				</div>
				<a class="gotolook" href="http://www.qianxingzhem.com/post-1962.html" >阅读更多 &gt;&gt;</a>
			</article>
				
			<div class="pagination fl ofh ">
				<div class="pagenavi"><span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://www.qianxingzhem.com/page/2'>2</a>
<a class='page-numbers' href='http://www.qianxingzhem.com/page/3'>3</a>
<span class="page-numbers dots">&hellip;</span>
<a class='page-numbers' href='http://www.qianxingzhem.com/page/19'>19</a>
<a class="next page-numbers" href="http://www.qianxingzhem.com/page/2">&raquo;</a></div>			</div>	
		</div> <!-- main -->
		<aside  class="sidebar fl lh150 ">	
		<ul>
			<li id="search-3" class="widget widget_search">			<form method="get" class="searchform" action="http://www.qianxingzhem.com/">
				<input value="搜一下又不会怀孕..." type="text" name="s" class="s" onblur="if (this.value =='') this.value='搜一下又不会怀孕...'" onfocus="this.value=''" onclick="if (this.value=='搜一下又不会怀孕...') this.value=''" />
				<input type="submit" class="sb" value="GO" />
			</form></li><li id="categories-3" class="widget widget_categories"><h2 class="sidebartitle">文章目录</h2>		<ul>
	<li class="cat-item cat-item-11"><a href="http://www.qianxingzhem.com/post-category/css" title="View all posts filed under CSS">CSS</a>
</li>
	<li class="cat-item cat-item-45"><a href="http://www.qianxingzhem.com/post-category/html" title="View all posts filed under HTML">HTML</a>
</li>
	<li class="cat-item cat-item-46"><a href="http://www.qianxingzhem.com/post-category/javascript-2" title="View all posts filed under JS/JQ">JS/JQ</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://www.qianxingzhem.com/post-category/zuopin" title="View all posts filed under 作品">作品</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://www.qianxingzhem.com/post-category/others" title="View all posts filed under 其他">其他</a>
</li>
	<li class="cat-item cat-item-6"><a href="http://www.qianxingzhem.com/post-category/qianduan" title="View all posts filed under 前端相关">前端相关</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://www.qianxingzhem.com/post-category/webdev" title="View all posts filed under 网站与后台开发">网站与后台开发</a>
</li>
		</ul>
</li>		<li id="recent-posts-3" class="widget widget_recent_entries">		<h2 class="sidebartitle">近期文章</h2>		<ul>
					<li>
				<a href="http://www.qianxingzhem.com/post-2003.html" title="本博将停止更新">本博将停止更新</a>
						</li>
					<li>
				<a href="http://www.qianxingzhem.com/post-2001.html" title="IE10 的一些前端有关的特性">IE10 的一些前端有关的特性</a>
						</li>
					<li>
				<a href="http://www.qianxingzhem.com/post-1995.html" title="Emmet 常用的高级功能">Emmet 常用的高级功能</a>
						</li>
					<li>
				<a href="http://www.qianxingzhem.com/post-1993.html" title="Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面">Firefox 下 text-overflow:ellipsis 的省略号会浮动在上面</a>
						</li>
					<li>
				<a href="http://www.qianxingzhem.com/post-1989.html" title="Unicode 符号序号以及 HTML 实体字符表格">Unicode 符号序号以及 HTML 实体字符表格</a>
						</li>
				</ul>
		</li><li id="linkcat-38" class="widget widget_links"><h2 class="sidebartitle">网络好友</h2>
	<ul class='xoxo blogroll'>
<li><a href="http://binaryoung.com/" title="很有前途的小伙纸" target="_blank">Binaryoung</a>
很有前途的小伙纸</li>
<li><a href="http://peascloud.info/" title="很年轻的折腾狂" target="_blank">peascloud</a>
很年轻的折腾狂</li>
<li><a href="http://www.hiadmin.org/" title="专注于软件测试领域" target="_blank">Smart Testing</a>
专注于软件测试领域</li>
<li><a href="http://qianduanblog.com/" title="前端博客，同行" target="_blank">云淡然</a>
前端博客，同行</li>
<li><a href="http://geek100.com" title="前端同行" target="_blank">前端集合</a>
前端同行</li>
<li><a href="http://www.luckymoke.cn/" title="前端同行" target="_blank">吕侃的博客</a>
前端同行</li>
<li><a href="http://www.tinghaige.com" title="前端同行" target="_blank">听海阁</a>
前端同行</li>
<li><a href="http://www.qttc.net/" title="WEB开发，JS、PHP 大神" target="_blank">琼台博客</a>
WEB开发，JS、PHP 大神</li>
<li><a href="http://www.tanglangxia.com/" title="购物乱七八糟的分享" target="_blank">螳螂虾</a>
购物乱七八糟的分享</li>

	</ul>
</li>
<li id="linkcat-54" class="widget widget_links"><h2 class="sidebartitle">好站推荐</h2>
	<ul class='xoxo blogroll'>
<li><a href="http://blog.chloerei.com/" title="开发者，喜用 Ruby。writings.io 作者" target="_blank">Rei</a>
开发者，喜用 Ruby。writings.io 作者</li>
<li><a href="http://www.wpdaxue.com/" title="很不错的 WordPress 的教程" target="_blank">WordPress 大学</a>
很不错的 WordPress 的教程</li>
<li><a href="http://writings.io" title="纯纯的写作工具" target="_blank">Writings.io</a>
纯纯的写作工具</li>
<li><a href="http://www.zhangxinxu.com/wordpress/" title="前端超级大神" target="_blank">张鑫旭</a>
前端超级大神</li>
<li><a href="http://blog.wpjam.com/" title="WP超级大神" target="_blank">我爱水煮鱼</a>
WP超级大神</li>

	</ul>
</li>
		</ul>
		<ul class="sidebar-fo">
			<li id="categories-4" class="widget widget_categories "><h2 class="sidebartitle">分类目录</h2>		<ul>
	<li class="cat-item cat-item-11"><a href="http://www.qianxingzhem.com/post-category/css" title="View all posts filed under CSS">CSS</a>
</li>
	<li class="cat-item cat-item-45"><a href="http://www.qianxingzhem.com/post-category/html" title="View all posts filed under HTML">HTML</a>
</li>
	<li class="cat-item cat-item-46"><a href="http://www.qianxingzhem.com/post-category/javascript-2" title="View all posts filed under JS/JQ">JS/JQ</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://www.qianxingzhem.com/post-category/zuopin" title="View all posts filed under 作品">作品</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://www.qianxingzhem.com/post-category/others" title="View all posts filed under 其他">其他</a>
</li>
	<li class="cat-item cat-item-6"><a href="http://www.qianxingzhem.com/post-category/qianduan" title="View all posts filed under 前端相关">前端相关</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://www.qianxingzhem.com/post-category/webdev" title="View all posts filed under 网站与后台开发">网站与后台开发</a>
</li>
		</ul>
</li>		</ul
		
		</aside> <!-- sidebar -->	</div> <!-- mainwrap -->
		<footer class="footer ofh fl">
		<div class="footer-top"><div class="ftwrap c">			<div class="textwidget"><script type="text/javascript" src="http://js.tongji.linezing.com/2773162/tongji.js"></script><noscript><a href="http://www.linezing.com"><img src="http://img.tongji.linezing.com/2773162/tongji.gif"/></a></noscript></div>
		</div></div>
		<div class="footer-bottom"></div>
	</footer>
	<script type="text/javascript">
var duoshuoQuery = {"short_name":"qxzm","sso":{"login":"http:\/\/www.qianxingzhem.com\/wp-login.php?action=duoshuo_login","logout":"http:\/\/www.qianxingzhem.com\/wp-login.php?action=logout&_wpnonce=12de64ce62"},"theme":"default","stylePatch":"wordpress\/Qetro"};
duoshuoQuery.sso.login += '&redirect_to=' + encodeURIComponent(window.location.href);
duoshuoQuery.sso.logout += '&redirect_to=' + encodeURIComponent(window.location.href);
</script>
<script type="text/javascript" src="http://static.duoshuo.com/embed.js" charset="UTF-8" async="async"></script>
	<!-- Script
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="http://www.qianxingzhem.com/wp-content/themes/qetro/js/jquery-1.9.1.js"%3E%3C/script%3E'))</script>
	<script type="text/javascript" src="http://www.qianxingzhem.com/wp-content/themes/qetro/js/main.js"></script> -->
	<script type="text/javascript" src="http://www.qianxingzhem.com/wp-content/themes/qetro/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="http://www.qianxingzhem.com/wp-content/themes/qetro/js/main.js"></script></body>
</html>